<script setup lang="tsx">
import { underlineToHump } from '@/common/utils/stringTrans'
import { useDesign } from '@fetm/shared-hooks'
import { ElMessage, ElScrollbar } from 'element-plus'
import { LoginForm } from './components'

defineOptions({
  name: 'Login',
})

const { getPrefixCls } = useDesign()

const prefixCls = getPrefixCls('login')

const title = import.meta.env.VITE_APP_TITLE

function toRegister() {
  ElMessage.info('系统暂无自主注册渠道，请联系管理员开通账号')
}
</script>

<template>
  <div
    :class="prefixCls"
    class="relative h-[100%] lt-xl:bg-[var(--login-bg-color)] lt-md:px-10px lt-sm:px-10px lt-xl:px-10px"
  >
    <ElScrollbar class="h-full">
      <div class="relative mx-auto h-[calc(100vh-2px)] flex">
        <div
          :class="`${prefixCls}__left h-100% flex-1 bg-gray-500 bg-opacity-20 relative p-30px lt-xl:hidden`"
        >
          <div class="relative flex items-center text-white">
            <img src="/favicon.ico" class="mr-10px h-48px w-48px">
            <span class="text-24px font-bold">{{
              underlineToHump(title)
            }}</span>
          </div>
          <div class="h-[calc(100%-60px)] flex items-center justify-center">
            <div>
              <img
                key="1"
                src="@/assets/svgs/login-box-bg.svg"
                alt=""
                class="w-350px"
              >
              <div key="2" class="text-center text-20px text-white">
                欢迎
              </div>
            </div>
          </div>
        </div>
        <div
          class="relative h-100% flex-1 p-30px dark:bg-[var(--login-bg-color)] lt-sm:p-10px"
        >
          <div
            class="flex items-center justify-between text-white at-2xl:justify-end at-xl:justify-end"
          >
            <div class="flex items-center at-2xl:hidden at-xl:hidden">
              <img src="/favicon.ico" class="mr-10px h-48px w-48px">
              <span class="text-24px font-bold">{{
                underlineToHump(title)
              }}</span>
            </div>
          </div>
          <div
            class="m-auto h-full w-[100%] flex items-center at-2xl:max-w-500px at-lg:max-w-500px at-md:max-w-500px at-xl:max-w-500px"
          >
            <LoginForm
              class="m-auto h-auto p-20px lt-xl:rounded-3xl lt-xl:light:bg-white"
              @to-register="toRegister"
            />
          </div>
        </div>
      </div>
    </ElScrollbar>
  </div>
</template>

<style lang="less" scoped>
@prefix-cls: ~'@{namespace}-login';

.@{prefix-cls} {
  overflow: auto;

  &__left {
    &::before {
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;
      width: 100%;
      height: 100%;
      background-image: url('@/assets/svgs/login-bg.svg');
      background-position: center;
      background-repeat: no-repeat;
      content: '';
    }
  }
}
</style>
